<div class="master" id="master">
    <!--header-->
    <div class="fmc-header">
      <div class="fmc-menu-logo">
         <img :src="cdn + 'dadiLogo.svg'"> 
      </div>
      <div class="menu-zoom" @click="menuStatus = !menuStatus">
        <transition
          mode="out-in"
          name="menu-status-classes-transition"
          duration="500"
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut">
          <div v-if="menuStatus" key="close" class="icon-close"></div>
          <div v-else key="open" class="icon-open"></div>
        </transition>
      </div>
      <div class="message-news" @click="gotoMessage">
        <el-badge :is-dot="messageStatus" class="item">
          <span class="icon-fmc-64"></span>
        </el-badge>
      </div>
      <div class="menu-app-download">
        <router-link to="/appDownLoad">下载APP</router-link>
      </div>
      <router-link class="fmc-depatementname" to="">当前所属部门：<span>{{depatementName}}</span></router-link>
      <router-link class="fmc-username" to="/userCenter">当前登录用户：<span>{{userName}}</span></router-link>
      <div class="logout">
        <el-button class="icon-logout" size="large" type="text" @click.native="logout">安全退出</el-button>
        <a class="el-icon-setting" href="/FMC/index.do" target="_blank"></a>
      </div>
    </div>
    <div class="fmc-flex">
    <!--左侧导航菜单-->
    <transition
      name="menu-animation"> 
      <div class="fmc-new-menu" v-show="menuStatus">
        <div class="fmc-new-menu-con" ref="menuWrap">
          <el-menu class="el-menu-vertical"
            ref="menu"
            theme="light"
            unique-opened
            router
            :default-openeds="openedMenu"
            :default-active="activeMenu">
            <div v-for="(sub, index) in menuList" :key="sub.name">
              <el-submenu :index="sub.name" v-if="sub.children">
                <template slot="title">
                  <i :class="sub.btnicon"></i>
                  <span v-text="sub.name"></span>
                </template>
                <div v-for="(subchild, indexchild) in sub.children" :key="subchild.name">
                  <el-submenu :index="subchild.name" v-if="subchild.children">
                    <template slot="title">
                      <i :class="subchild.btnicon"></i>
                      <span v-text="subchild.name"></span>
                    </template>
                    <el-menu-item
                      :title="itemchild.name"
                      v-for="itemchild in subchild.children" 
                      :key="itemchild.name"
                      :index="itemchild.url"
                      v-text="">
                      <i :class="itemchild.btnicon"></i> 
                      <span v-text="itemchild.name"></span>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item
                    :title="subchild.name"
                    :index="subchild.url"
                    v-else>
                    <i :class="subchild.btnicon"></i> 
                    <span v-text="subchild.name"></span>
                  </el-menu-item>
                </div>
              </el-submenu>
              <el-menu-item
                :title="sub.name"
                :index="sub.url"
                v-else>
                <i :class="sub.btnicon"></i>
                <span v-text="sub.name"></span>
              </el-menu-item>
            </div>
          </el-menu>
          <div class="operation-guide icon-guide">
            <router-link to="/operationManual">
              <span>操作指南</span>
            </router-link>
          </div>
        </div>
      </div>
    </transition> 
    <!-- 内容部分 -->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInLeft"
      leave-active-class="animated fadeOutLeft"> 
      <div class="container">
        <!-- 内容部分 -->
        <transition
          name="portal-classes-transition"
          enter-active-class="animated fadeInDown">
          <router-view></router-view>
        </transition>
      </div>
    </transition> 
    </div>
  </div>
